import { useRef, useCallback, useState } from 'react';
import { SymbolToolbar } from './components/Toolbar/SymbolToolbar';
import { FormatToolbar } from './components/Toolbar/FormatToolbar';
import { CodeEditor } from './components/Editor/CodeEditor';
import { VisualEditor } from './components/Editor/VisualEditor';
import { FormulaPreview } from './components/Preview/FormulaPreview';
// 不再需要useFormulaEditor
import './App.css';

/**
 * MathEditor 主应用组件
 * 集成所有功能模块，提供完整的公式编辑体验
 */
function App() {
  // 创建编辑器引用
  const editorRef = useRef<HTMLTextAreaElement>(null); // 保持为null安全的ref
  
  // useState已在顶部导入
  
  // 直接使用useFormulaEditor返回的对象
  // 不再使用useFormulaEditor hook
  
  // 在组件内部管理状态
  const [mode, setMode] = useState<'code' | 'visual'>('code');
  const [latex, setLatex] = useState<string>('');
  const [formatOptions, setFormatOptionsState] = useState<any>({
    fontSize: 100,
    color: '#000000',
    align: 'center'
  });
  const [errors] = useState<string[]>([]);
  
  // 更新格式选项的函数
  const updateFormatOptions = (newOptions: any) => {
    setFormatOptionsState((prev: any) => ({ ...prev, ...newOptions }));
  };
  
  // 导出公式函数
  const exportFormula = async (format: 'latex' | 'svg' | 'png' | 'mathml') => {
    console.log('Exporting formula in format:', format);
  };
  
  // 复制LaTeX函数
  const copyLatex = async () => {
    try {
      await navigator.clipboard.writeText(latex);
      console.log('LaTeX copied to clipboard');
    } catch (error) {
      console.error('Failed to copy LaTeX:', error);
    }
  };
  
  // 插入符号函数
  const insertSymbol = (symbolLatex: string) => {
    setLatex((prev: string) => prev + symbolLatex);
  };
  


  // 切换编辑模式
  const handleModeChange = (newMode: 'code' | 'visual') => {
    setMode(newMode);
  };

  // 格式化工具栏变化处理
  const handleFormatChange = useCallback((format: Record<string, any>) => {
    updateFormatOptions((prev: any) => ({ ...prev, ...format }));
  }, []);

  // 导出公式
  const handleExport = async (format: 'latex' | 'svg' | 'png' | 'mathml') => {
    try {
      await exportFormula(format);
    } catch (error) {
      console.error('导出失败:', error);
    }
  };

  // 复制LaTeX代码
  const handleCopyLatex = () => {
    copyLatex();
  };

  return (
    <div className="app-container">
      {/* 头部标题 */}
      <header className="app-header">
        <h1>MathEditor - Web 端公式编辑器</h1>
        <div className="mode-switch">
          <button 
            className={`mode-button ${mode === 'code' ? 'active' : ''}`}
            onClick={() => handleModeChange('code')}
          >
            代码模式
          </button>
          <button 
            className={`mode-button ${mode === 'visual' ? 'active' : ''}`}
            onClick={() => handleModeChange('visual')}
          >
            可视化模式
          </button>
        </div>
      </header>

      {/* 工具栏区域 */}
      <div className="toolbars-section">
        {/* 格式工具栏 */}
        <FormatToolbar 
          formatOptions={formatOptions}
          onFormatChange={handleFormatChange}
          onExport={handleExport}
          onCopyLatex={handleCopyLatex}
        />
        
        {/* 符号工具栏 */}
        <SymbolToolbar 
          onSymbolSelect={insertSymbol}
          // 移除不需要的editorRef属性
        />
      </div>

      {/* 主要工作区 */}
      <main className="main-content">
        {/* 编辑器区域 */}
        <section className="editor-section">
          {/* 代码编辑器 */}
          <CodeEditor 
            latex={latex}
            mode={mode}
            onLatexChange={setLatex}
            editorRef={editorRef}
            // onCursorChange暂时未实现
          />
          
          {/* 可视化编辑器 */}
          <VisualEditor 
            latex={latex}
            mode={mode}
            formatOptions={formatOptions}
            onLatexChange={setLatex}
            // onCursorChange暂时未实现
          />
        </section>

        {/* 预览区域 */}
        <section className="preview-section">
          <FormulaPreview 
            latex={latex}
            formatOptions={formatOptions}
            showErrors={true}
          />
        </section>
      </main>

      {/* 底部状态信息 */}
      <footer className="app-footer">
        <div className="status-info">
          <span className="formula-status">
            公式状态
          </span>
          <span className="latex-length">LaTeX长度: {latex.length} 字符</span>
        </div>
        {errors && errors.length > 0 && (
          <div className="error-info">
            {errors.map((err: string, index: number) => (
              <span key={index} className="error-message">{err}</span>
            ))}
          </div>
        )}
      </footer>
    </div>
  );
}

export default App
